<template>
    <div id="welfare">
        <!--头部-->
        <div id="head">
            <div id="headox">
                <div>
                    <img src="../image/welfare/cart_empty.c83f6832.png" alt="">
                    <p>还没有关注的门店哦，快去关注吧~</p>
                </div>
            </div>
        </div>
        <!--附近热门动态-->
        <div id="dynamic">
            <p>附近热门动态</p>
        </div>
        <div id="information">
            <div id="informationbox">
                <div id="infor"><!--信息-->
                    <div id="inforTop">
                        <a href="">
                            <img src="../image/welfare/5b42af22N54a6bbf4.jpg" alt="">
                            <p>
                                <span>淘菜园-南京玄武湖旗舰店</span>
                                <span>1小时前</span>
                            </p>
                        </a>
                        <button>关注</button>
                    </div>
                    <a id="infoText" href="">淘菜园 冬日暖心活动~ 全场满30减15+免运 鸡蛋8枚1元抢 青菜1元花菜1元洋葱1元 全场爆品统统 1元抢 免费开通会员  畅享会员大礼包 更多优惠  点击图片进店选购</a>
                    <div id="infoImgBox1">
                        <a id="infoImg1" href="">
                            <img src="../image/welfare/ae8031a512aa96ae.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div id="infor"><!--信息-->
                    <div id="inforTop">
                        <a href="">
                            <img src="../image/welfare/5a8f8034N02a6a892.jpg" alt="">
                            <p>
                                <span>幸福西饼蛋糕-南京店</span>
                                <span>1小时前</span>
                            </p>
                        </a>
                        <button>关注</button>
                    </div>
                    <a id="infoText" href="">每日特惠，下午茶全场最低价59元，限量秒杀！</a>
                   <div id="infoImgBox2">
                        <div>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5bf622bdN3d313d83.jpg" alt="">
                            </a>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5bfbc703N5b941b70.jpg" alt="">
                            </a>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5bf64fccN3a29db5d.jpg" alt="">
                            </a>
                        </div>
                        <div>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5bf64f15N92fa7870.jpg" alt="">
                            </a>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5bf3796dN19be9a3e.jpg" alt="">
                            </a>
                            <a id="infoImg2" href="">
                                <img src="../image/welfare/5c04c960N3bb30a59.jpg" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Navs active="iocn-nav2" active1="iocn-nav2"></Navs>
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style lang="scss" scoped >
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }
//头部
    #head{
        width:750px;
        height:511px;
        
        #headox{
            width:710px;
            height:446px;
            padding:20px 20px 45px 20px;
            margin:auto;
            background-color:rgb(241, 239, 239);

            div{
                width:710px;
                height:446px;
                background-color:#fff;
                border-radius:10px;
                //图片
                img{
                    width:320px;
                    height:320px;
                    padding:0 196px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                    
                }
                //文字
                p{
                    width:710px;
                    height:38px;
                    font-size:28px;
                    color:#333;
                    text-align:center;
                    line-height:38px;
                }
            }            
        }
    }
//附近热门动态动态
    #dynamic{
        width:750px;
        height:138px;

        
        p{
            width:710px;
            height:48px;
            padding:60px 20px 30px 20px;
            font-size:38px;
            font-weight:600;
            color:#333;
            background-color:rgb(241, 239, 239);
        }
    }
//信息
    #information{
        width:750px;

        #informationbox{
            width:710px;
            padding:0 20px;
            margin:auto;
            background-color:rgb(241, 239, 239);

            #infor{
                width:670px;
                //height:542px;
                padding:37px 20px;
                margin-bottom:20px;
                background-color:#fff;
                border-radius:10px;

                //信息的顶部
                #inforTop{
                    width:670px;
                    height:84px;
                    display:flex;

                    a{
                        display:block;
                        width:538px;
                        height:84px;
                        display:flex;
                        //图片
                        img{
                            width:80px;
                            height:80px;
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                        //文字
                        p{
                           width:434px;
                           height:84px;
                           padding-left:20px;

                           span{
                               display:block;
                               width:434px;
                           }

                           span:nth-of-type(1){ 
                               height:40px;                               
                               font-size:28px;
                               color:#333;
                               line-height:40px;
                           }
                           span:nth-of-type(2){
                               height:30px;
                               margin-top:6px;
                               font-size:24px;
                               color:#999;
                               line-height:30px;
                           }
                        }
                    }
                    //关注按钮
                    button{
                        width:132px;
                        height:52px;
                        background-color:#47b34f;
                        color:#fff;
                        font-size:28px;
                        text-align:center;
                        line-height:48px;
                        border-radius:50px;
                        margin-top:20px;
                    }
                }
                //信息文字
                #infoText{
                    width:670px;
                    height:192px;
                    margin-top:10px;
                    font-size:32px;
                    color:#333;
                    line-height:48px;
                }
                //信息图片
                #infoImgBox1{
                    width:670px;
                    height:232px;
                    margin:20px 0 4px 0;
                    #infoImg1{
                        width:670px;
                        height:232px;
                        display:block;

                        img{
                            width:670px;
                            height:224px;
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    } 
                }
                #infoImgBox2{
                   width:670px;
                   height:454px;
                   margin-top:20px;

                   div{
                       width:670px;
                       height:227px;
                       display:flex;
                       justify-content:space-between;

                       a{
                        display:block;
                        width:216px;
                        height:216px;
                        border:1px solid #ccc;
                        border-radius:5px;

                          img{
                            display:block;
                            width:216px;
                            height:216px;
                            background-repeat:no-repeat;
                            background-size:100% 100%; 
                          }
                       }
                   }
                }                              
            }
        }
    }
</style>


